.nes-table-responsive {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.nes-table {
  table-layout: fixed;
  background-color: $background-color;
  @mixin thsAndTdsBoxShadow($color) {
    th,
    td {
      padding: 0.5rem;
      word-wrap: break-word;
    }

    tr {
      th + th {
        box-shadow: -4px 0 $color;
      }
      td {
        box-shadow: 0 -4px $color;
      }
      td:not(:first-child) {
        box-shadow: -4px 0 $color, 0 -4px $color;
      }
    }
  }
  &.is-centered th {
    text-align: center;
  }
  &.is-bordered {
    margin: 4px;
    box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
    @include thsAndTdsBoxShadow($base-color);
  }
  &.is-dark {
    position: relative;
    color: $background-color;
    background-color: $base-color;
    box-shadow: 4px -4px $base-color, -4px -4px $base-color, -4px 4px $base-color,
      4px 4px $base-color;

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: "";
      background: linear-gradient(to left, transparent 4px, $background-color 4px) no-repeat,
        linear-gradient(to bottom, transparent 4px, $background-color 4px) no-repeat,
        linear-gradient(to right, transparent 4px, $background-color 4px) no-repeat,
        linear-gradient(to top, transparent 4px, $background-color 4px) no-repeat;
      background-position: 100% 0, 100% 0, 0 100%, 0 100%;
      background-size: calc(100% - 4px) 4px, 4px calc(100% - 4px);
    }

    @include thsAndTdsBoxShadow($background-color);
  }
}
